﻿<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="Insert Rows via the API" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <h3>Product Information</h3>
    <table>
        <tr>
            <td style="text-align:left">
                <AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle" CellSpacing="0" CellPadding="3" DataKeyName="ID" SortColumn="Name" SortOrderAscendingImageUrl="~/Images/up.gif" SortOrderDescendingImageUrl="~/Images/dn.gif" SortCommandEvent="onSortCommand" RowDataBoundEvent="onRowDataBound">
                   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
                   <RowStyle CssClass="RowStyle"/>
                   <HeaderStyle CssClass="HeaderStyle"/>
                   <Columns>
                        <AjaxData:GridViewBoundColumn HeaderText="Product" DataField="Name" SortField="Name" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Category" DataField="CategoryName" SortField="CategoryName" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Supplier" DataField="SupplierName" SortField="SupplierName" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Quantity/Unit" DataField="QuantityPerUnit" SortField="QuantityPerUnit" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="left" HeaderStyle-Wrap="false"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Unit Price" DataField="UnitPrice" SortField="UnitPrice" DataFormatString="C" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Right" HeaderStyle-Wrap="false"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Units In Stock" DataField="UnitsInStock" SortField="UnitsInStock" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Right" HeaderStyle-Wrap="false"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Units On Order" DataField="UnitsOnOrder" SortField="UnitsOnOrder" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Right" HeaderStyle-Wrap="false"/>
                        <AjaxData:GridViewCheckBoxColumn HeaderText="Discontinued" DataField="UnitsOnOrder" SortField="Discontinued" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Center" HeaderStyle-Wrap="false"/>
                   </Columns>
                </AjaxData:GridView>
                <a href='javascript:void(0);' onclick="insertRow();">Insert Rows</a>
            </td>
        </tr>
        <tr>
            <td style="text-align:right">
                <AjaxData:Pager ID="Pager1" runat="server" CssClass="PagerRowStyle" CurrentPageStyle-CssClass="PagerCurrentPage" OtherPageStyle-CssClass="PagerOtherPage" PageChangedEvent="pageChanged"></AjaxData:Pager>
            </td>
        </tr>
    </table>

    <script type="text/javascript">

        var _gridView;
        var _pager;
        var _id1;
        var _id2;

        function pageLoad(sender, e)
        {
            _gridView = GridView1;
            _pager = Pager1;
            loadProducts();
        }
        
        function insertRow()
        {
            _id1 = Math.floor(Math.random() * 9999);
            _id2 = Math.floor(Math.random() * 9999);
            
            var data = new Array();
            data[0] = { Id: _id1, Name: "Sonu Kapoor", CategoryName: "IT", SupplierName: "DNS", QuantityPerUnit: 87, UnitPrice:100, UnitsInStock:0,UnitsOnOrder:500, Discontinued:true };
            data[1] = { Id: _id2, Name: "Xun Ding", CategoryName: "IT", SupplierName: "DNS", QuantityPerUnit: 87, UnitPrice:100, UnitsInStock:0,UnitsOnOrder:500, Discontinued:true };
            
            _gridView.insertRows(data);
            
            // If you need to display the necessary textboxes to add the new 
            // data, please refer to demo: /gridview/InsertRow.aspx
        }

        function loadProducts()
        {
            //Need to convert the sortoder so our WS understand
            var sortColumn = _gridView.get_sortColumn();
            var sortOrder = (_gridView.get_sortOrder() == AjaxDataControls.GridViewSortOrder.Descending) ? 'DESC' : 'ASC';
            var startIndex = (_pager.get_pageIndex() * _pager.get_pageSize());

            DataService.GetProductList(startIndex, _pager.get_pageSize(), sortColumn, sortOrder, onLoadSuccess);
        }

        function onLoadSuccess(result)
        {
            _pager.set_recordCount(result.Total);
            _gridView.set_dataSource(result.Rows);
            _gridView.dataBind();
        }

        function onSortCommand(sender, e)
        {
            _gridView.set_sortColumn(e.get_sortColumn())
            _gridView.set_sortOrder(e.get_sortOrder());
            _pager.set_pageIndex(0); // need to reset the page index as sorting is changed
            loadProducts();
        }

        function pageChanged(sender, e)
        {
            _pager.set_pageIndex(e.get_newPageIndex());
            loadProducts();
        }
        
        function onRowDataBound(sender, e)
        {
            var row = e.get_row();
            if (row.get_isDataRowType())
            {
                var dataItem = row.get_dataItem();
                if (typeof _id1 != "undefined" && typeof _id2 != "undefined")
                {
                    var searchForId;
                    if(dataItem.Id == _id1)
                    {
                        searchForId = _id1;
                    }
                    
                    if(dataItem.Id == _id2)
                    {
                        searchForId = _id2;
                    }
                    
                    if (searchForId != null)
                    {
                        var tr = row.get_container();
                        tr.id = searchForId;    // change id, because jquery doesnt seem to like the $ created variable names
                        
                        $("#" + searchForId).effect("pulsate", { times: 3 }, 500);
                    }
                }
            }
        }

    </script>

</asp:Content>